<template>
  <div class="attheader">
    <div class="nav">
      <ToggleSidebar />
      <div class="box">
        <p @click="funb()">动态</p>
        <div class="border1" ref="dongt"></div>
      </div>
      <div class="box">
        <p @click="fun()">云圈</p>
        <div class="border1 yun" ref="yunq"></div>
      </div>

      <i class="iconfont icon-tianjia1" @click="jia()"></i>
    </div>
    <div class="list">
      <Ul>
        <li>发图文</li>
        <li>发视频</li>
        <li>K歌</li>
        <li>录声音</li>
      </Ul>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    fun() {
      this.$router.push("/aaa");
      this.$refs.yunq.style.display = "block";
      this.$refs.dongt.style.display = "none";
    },
    funb() {
      this.$router.push("/at/nav");
      this.$refs.dongt.style.display = "block";
      this.$refs.yunq.style.display = "none";
    },
    jia() {},
  },
};
</script>

<style scoped>
.attheader {
  width: 100%;
  height: auto;

  padding-left: 0.3rem;
  padding-right: 0.3rem;
}
.nav {
  height: 0.9rem;

  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.34rem;
  font-weight: 800;
  color: #5f5d5e;
}
.icon-tianjia1 {
  font-size: 0.57rem;
  /* background-color: red; */
  color: #ff3a3b;
}
.icon-toggle {
  font-size: 0.37rem;
}
p {
  text-align: center;
}
.border1 {
  width: 0.84rem;
  height: 0.13rem;
  border-radius: 0.05rem;
  background-color: #fe4b49;
}
.yun {
  display: none;
}
.list {
  width: 2rem;
  height: 3rem;
  position: absolute;
  right: 0.3rem;
  top: 1rem;
  background-color: #fff;
  border-radius: 0.3rem;
  padding-top: 0.2rem;
}
li {
  height: 0.5rem;
  text-align: center;
}
.list {
  display: none;
}
</style>